新しい画面に移動して戻る

コンテンツ

ほとんどのアプリには、さまざまな種類の情報を表示するための複数の画面が含まれています。情報。たとえば、アプリには商品を表示する画面がある場合があります。ユーザーが商品画像をタップすると、新しい画面が表示されます製品についての詳細。

Android では、ルートはアクティビティに相当します。 iOS では、ルートは ViewController に相当します。 Flutter では、ルートは単なるウィジェットです。

このレシピでは、Navigator新しいルートに移動します。

次のいくつかのセクションでは、2 つのルート間を移動する方法を説明します。次の手順を使用します。

2 つのルートを作成します。
Navigator.push() を使用して 2 番目のルートに移動します。
Navigator.pop() を使用して最初のルートに戻ります。

1. 2 つのルートを作成する

まず、作業する 2 つのルートを作成します。基本的な例なので、各ルートにはボタンが 1 つだけ含まれています。のボタンをタップすると、最初のルートは 2 番目のルートに移動します。のボタンをタップすると、 2番目のルートは最初のルートに戻ります。

まず、視覚的な構造を設定します。

class FirstRoute extends StatelessWidget {
  const FirstRoute({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('First Route'),
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text('Open route'),
          onPressed: () {
            // Navigate to second route when tapped.
          },
        ),
      ),
    );
  }
}

class SecondRoute extends StatelessWidget {
  const SecondRoute({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Second Route'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // Navigate back to first route when tapped.
          },
          child: const Text('Go back!'),
        ),
      ),
    );
  }
}

2. Navigator.push() を使用して 2 番目のルートに移動します。

新しいルートに切り替えるには、Navigator.push()方法。のpush()メソッドが追加しますRouteによって管理されるルートのスタックにのNavigator。どこにありますかRouteから来る？独自に作成することも、MaterialPageRoute、に移行するので便利です。プラットフォーム固有のアニメーションを使用した新しいルート。

の中にbuild()の方法FirstRouteウィジェット、を更新するonPressed()折り返し電話：

// Within the `FirstRoute` widget
onPressed: () {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => const SecondRoute()),
  );
}

3. Navigator.pop() を使用して最初のルートに戻ります。

2 番目のルートを閉じて最初のルートに戻るにはどうすればよいでしょうか? を使用することで、650ea113-883b-45b6-aeac-bd4af3a5ac1e方法。のpop()メソッドは現在のものを削除しますRouteの山からが管理するルートNavigator。

元のルートへの復帰を実装するには、onPressed()のコールバックSecondRouteウィジェット:

// Within the SecondRoute widget
onPressed: () {
  Navigator.pop(context);
}

インタラクティブな例

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    title: 'Navigation Basics',
    home: FirstRoute(),
  ));
}

class FirstRoute extends StatelessWidget {
  const FirstRoute({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('First Route'),
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text('Open route'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const SecondRoute()),
            );
          },
        ),
      ),
    );
  }
}

class SecondRoute extends StatelessWidget {
  const SecondRoute({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Second Route'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: const Text('Go back!'),
        ),
      ),
    );
  }
}